<template>
  <div class="category_container">
    <div class="title" @click="titleClickHandler">
      <span class="title_text" :class="{
        active: index == activeIndex
      }">{{ item.title }}</span>
      <span class="title_go">
        <img src="./images/right_arrow.png" alt="">
      </span>
    </div>
    <div class="category3_list">
      <div class="category3_item" v-for="(sonItem, index) in item.subCategories[0].metadataValues" :key="sonItem.id"
        @click="toCategory3(sonItem.name, index)">{{
          sonItem.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { AnyObject } from '@/types/category';
import { useRouter } from "vue-router"
const router = useRouter()
const props = defineProps<{
  item: AnyObject
  index: number
  activeIndex: number
}>()

/* 点击标题的回调 */
const titleClickHandler = () => {
  router.push({
    name: "Category2",
    query: {
      categoryId: props.item.id,
      title: props.item.title
    }
  })
}

/* 点击副标题的回调 */
const toCategory3 = (title: string, index: number) => {
  router.push({
    name: "Category3",
    query: {
      categoryId: props.item.id,
      title: title,
      index: index
    }
  })
}
</script>

<style lang="less" scoped>
.category_container {
  display: flex;
  flex-direction: column;
  width: 285px;
  // background-color: aqua;
  box-sizing: border-box;
  padding-left: 10px;

  .title {
    width: 270px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: .5px solid #e8e8e8;
    position: relative;

    .title_text {
      font-size: 14px;
      line-height: 50px;
      font-weight: bold;
    }

    .title_go {
      font-size: 14px;
      line-height: 50px;
      position: absolute;
      right: 10px;
      top: 5px;
    }
  }

  .category3_list {
    width: 270px;
    display: flex;
    flex-wrap: wrap;

    .category3_item {
      padding: 7.5px;
      font-size: 14px;
      height: 35px;
      line-height: 35px;
      color: #72727b;
    }
  }
}

.active {
  color: #fe7e5f;
}
</style>